<!--多条件搜索-->
<form nz-form [formGroup]="formModel" (ngSubmit)="submitForm()">
  <div class="toolbar margin-bottom" [ngClass]="isMobile?'wrap-mobile':'wrap'">

    <div class="item" nz-col nzXs="24" nzSm="24" nzMd="12" nzLg="8" nzXl="6">
      <nz-form-item>
        <nz-form-label [nzSpan]="8" nzFor="deviceNo">设备号</nz-form-label>
        <nz-form-control [nzSpan]="16">
          <input type="text" id="deviceNo" nz-input formControlName="deviceNo" placeholder="请输入设备号"/>
        </nz-form-control>
      </nz-form-item>
    </div>

    <div class="item" nz-col nzXs="24" nzSm="24" nzMd="12" nzLg="8" nzXl="6" *ngIf="userInfo.roleId == roleIdEnum.SUPER_ADMINISTRATOR || userInfo.roleId == roleIdEnum.AGENT">
      <nz-form-item>
        <nz-form-label [nzSpan]="8" nzFor="name">合作伙伴</nz-form-label>
        <nz-form-control [nzSpan]="16" nzErrorTip="请选择合作伙伴">
          <nz-select formControlName="agencyId" nzShowSearch nzAllowClear nzPlaceHolder="请选择合作伙伴"
                     (ngModelChange)="gainAgencyId($event)">
            <nz-option *ngFor="let item of agencyList" [nzLabel]="item.name" [nzValue]="item.id"></nz-option>
          </nz-select>
        </nz-form-control>
      </nz-form-item>
    </div>

    <div class="item" nz-col nzXs="24" nzSm="24" nzMd="12" nzLg="8" nzXl="6">
      <nz-form-item>
        <nz-form-label [nzSpan]="8" nzFor="name">运营商</nz-form-label>
        <nz-form-control [nzSpan]="16" nzErrorTip="Please input your name">
          <nz-select formControlName="userId" nzShowSearch nzAllowClear nzPlaceHolder="请选择运营商"
                     (ngModelChange)="gainUserId($event)">
            <nz-option *ngFor="let item of userList" nzLabel="{{item?.username}}   {{item?.name}}"
                       nzValue="{{item.id}}"></nz-option>
          </nz-select>
        </nz-form-control>
      </nz-form-item>
    </div>
    <div class="item" nz-col nzXs="24" nzSm="24" nzMd="12" nzLg="8" nzXl="6">
      <nz-form-item>
        <nz-form-label [nzSpan]="8" nzFor="name">场地</nz-form-label>
        <nz-form-control [nzSpan]="16" nzErrorTip="请选择场地">
          <nz-select nzShowSearch nzAllowClear nzPlaceHolder="请选择场地" formControlName="merchantStoreId">
            <nz-option nzLabel="不限" nzValue="0"></nz-option>
            <nz-option *ngFor="let item of merchantStoreList" [nzLabel]="item.storeName" nzValue="{{item.id}}"></nz-option>
          </nz-select>
        </nz-form-control>
      </nz-form-item>
    </div>
    <div class="item" nz-col nzXs="24" nzSm="24" nzMd="12" nzLg="8" nzXl="6">
      <nz-form-item>
        <nz-form-label [nzSpan]="8">开始时间</nz-form-label>
        <nz-form-control >
          <app-my-date-picker [dateTimeType]="startDateTimeType" [date]="startDateTime" (event)="outDateTime($event)"></app-my-date-picker>
        </nz-form-control>
      </nz-form-item>
    </div>

    <div class="item" nz-col nzXs="24" nzSm="24" nzMd="12" nzLg="8" nzXl="6">
      <nz-form-item>
        <nz-form-label [nzSpan]="8">结束时间</nz-form-label>
        <nz-form-control [nzSpan]="16">
          <app-my-date-picker [dateTimeType]="endDateTimeType" [date]="endDateTime" (event)="outDateTime($event)"></app-my-date-picker>
        </nz-form-control>
      </nz-form-item>
    </div>


    <div class="item" nz-col nzXs="24" nzSm="24" nzMd="12" nzLg="8" nzXl="6">
      <nz-form-item>
        <nz-form-label [nzSpan]="8" nzFor="outTradeNo">订单号</nz-form-label>
        <nz-form-control [nzSpan]="16">
          <input type="text" id="outTradeNo" nz-input formControlName="outTradeNo" placeholder="请输入订单号"/>
        </nz-form-control>
      </nz-form-item>
    </div>

    <div class="item" nz-col nzXs="24" nzSm="24" nzMd="12" nzLg="8" nzXl="6">
      <div>
        <nz-form-item>
          <nz-form-label [nzSpan]="8">订单状态</nz-form-label>
          <nz-form-control [nzSpan]="16">
            <nz-select nzShowSearch nzAllowClear nzPlaceHolder="请选择订单状态" formControlName="status">
              <nz-option nzLabel="不限" nzValue="-1"></nz-option>
              <nz-option nzLabel="待支付" nzValue="0"></nz-option>
              <nz-option nzLabel="成功" nzValue="1"></nz-option>
              <nz-option nzLabel="关闭" nzValue="2"></nz-option>
              <nz-option nzLabel="撤单" nzValue="3"></nz-option>
              <nz-option nzLabel="退单" nzValue="4"></nz-option>
              <nz-option nzLabel="失败" nzValue="5"></nz-option>
              <nz-option nzLabel="部分退款" nzValue="6"></nz-option>
              <nz-option nzLabel="全额退款" nzValue="7"></nz-option>
              <nz-option nzLabel="退款中" nzValue="8"></nz-option>
              <nz-option nzLabel="退款失败" nzValue="9"></nz-option>
            </nz-select>
          </nz-form-control>
        </nz-form-item>
      </div>
    </div>

    <div class="item" nz-col nzXs="24" nzSm="24" nzMd="12" nzLg="8" nzXl="6">
      <div>
        <nz-form-item>
          <nz-form-label [nzSpan]="8">出货状态</nz-form-label>
          <nz-form-control [nzSpan]="16">
            <nz-select nzShowSearch nzAllowClear nzPlaceHolder="请选择出货状态" formControlName="shipmentStatus">
              <nz-option nzLabel="不限" nzValue="-1"></nz-option>
              <nz-option nzLabel="待出货" nzValue="0"></nz-option>
              <nz-option nzLabel="成功" nzValue="1"></nz-option>
              <nz-option nzLabel="失败" nzValue="2"></nz-option>
              <nz-option nzLabel="部分失败" nzValue="3"></nz-option>
            </nz-select>
          </nz-form-control>
        </nz-form-item>
      </div>
    </div>

    <div class="item" nz-col nzXs="24" nzSm="24" nzMd="12" nzLg="8" nzXl="6">
      <nz-form-item>
        <nz-form-label [nzSpan]="8" nzFor="hierarchy">货道层</nz-form-label>
        <nz-form-control [nzSpan]="16">
          <nz-input-number id="hierarchy" formControlName="hierarchy" style="width: 100%" [nzMin]="1" [nzStep]="1"></nz-input-number>
        </nz-form-control>
      </nz-form-item>
    </div>
    <div class="item" nz-col nzXs="24" nzSm="24" nzMd="12" nzLg="8" nzXl="6">
      <nz-form-item>
        <nz-form-label [nzSpan]="8" nzFor="freightLane">货道列</nz-form-label>
        <nz-form-control [nzSpan]="16">
          <nz-input-number id="freightLane" formControlName="freightLane" style="width: 100%" [nzMin]="1"  [nzStep]="1"></nz-input-number>
        </nz-form-control>
      </nz-form-item>
    </div>

    <div class="item" nz-col nzXs="24" nzSm="24" nzMd="12" nzLg="8" nzXl="6" class="margin-bottom"
         [ngClass]="isMobile? '': 'padding-left'">
      <div nz-row nzJustify="end">
        <div nz-col>
          <button *ngIf="!isMobile" nz-button nzType="primary" class="button_search"><i nz-icon nzType="search"
                                                                                        nzTheme="outline"></i>查询
          </button>
          <button *ngIf="isMobile" nz-button nzBlock nzType="primary" class="button_search"><i nz-icon nzType="search"
                                                                                               nzTheme="outline"></i>查询
          </button>
          <button (click)="exportCsv()" *ngIf="!isMobile" nz-button nzType="primary" style="margin-left: 10px" class="button_search">
            <i nz-icon nzType="to-top" nzTheme="outline"></i>导出
          </button>
          <button (click)="exportCsv()" *ngIf="isMobile" nz-button style="margin-top: 5px"  nzBlock nzType="primary" class="button_search">
            <i nz-icon nzType="to-top" nzTheme="outline"></i>导出
          </button>
        </div>
      </div>
    </div>
  </div>
</form>
<div [ngClass]="isMobile?'wrap-mobile':'wrap'">
  <nz-table #nzTable [nzData]="listOfData" nzTableLayout="fixed"
            [(nzPageIndex)]="pageHelper.currentPage" [nzFrontPagination]="false"
            (nzPageIndexChange)="nzPageIndexChange($event)"
            [(nzPageSize)]="pageHelper.pageSize" [nzTotal]="pageHelper.totalItems"
            [nzScroll]="{ x: 'auto' }" [nzPageSizeOptions]="pageHelper.pageSizeOptions" nzShowSizeChanger (nzPageSizeChange)="onPageSizeChange($event)">
    <thead>
      <tr>
        <th>时间 / 订单号</th>
        <th>场地</th>
        <th>设备号</th>
        <th>数量</th>
        <th>商品名称</th>
        <th>订单金额</th>
        <th>出货货道</th>
        <th>出货状态</th>
        <th>订单状态</th>
        <th *ngIf="userInfo.roleId == roleIdEnum.SUPER_ADMINISTRATOR || userInfo.roleId == roleIdEnum.AGENT">合作伙伴</th>
        <th>运营商</th>
      </tr>
    </thead>
    <tbody>
      <ng-container *ngFor="let data of nzTable.data">
        <tr>
          <td nzEllipsis>
            <div>{{ data.createTime | date: 'yyyy-MM-dd HH:mm:ss'}}</div>
            <div>{{ data.outTradeNo }}</div>
          </td>
          <td nzEllipsis>
            <div>{{ data.storeName }}</div>
          </td>
          <td nzEllipsis>
            <div>{{ data.deviceNo }}</div>
          </td>
          <td nzEllipsis>
            <div>{{ data.num }}</div>
          </td>
          <td nzEllipsis>
            <div>{{ data.commodityName }}</div>
          </td>
          <td nzEllipsis>
            <div>{{ data.totalPrice }}</div>
          </td>
          <td nzEllipsis>
            <div>第{{ data.hierarchy }}层，第{{ data.freightLane }}货道</div>
          </td>
          <td nzEllipsis>
            <div>
              <span [ngStyle]="{'color':'#f50'}" *ngIf="data.shipmentStatus ==0">待出货</span>
              <span [ngStyle]="{'color':'#87d068'}" *ngIf="data.shipmentStatus ==1">出货成功</span>
              <span [ngStyle]="{'color':'#2db7f5'}" *ngIf="data.shipmentStatus ==2">出货失败</span>
              <span [ngStyle]="{'color':'#f94d3b'}" *ngIf="data.shipmentStatus ==3">部分失败</span>
            </div>
          </td>
          <td nzEllipsis>
            <div>
              <span [ngStyle]="{'color':'#f50'}" *ngIf="data.status ==0">待付款</span>
              <span [ngStyle]="{'color':'#87d068'}" *ngIf="data.status ==1">成功</span>
              <span [ngStyle]="{'color':'#2db7f5'}" *ngIf="data.status ==2">关闭</span>
              <span [ngStyle]="{'color':'#f94d3b'}" *ngIf="data.status ==3">撤销</span>
              <span [ngStyle]="{'color':'#f94d3b'}" *ngIf="data.status ==4">退单</span>
              <span [ngStyle]="{'color':'#f94d3b'}" *ngIf="data.status ==5">失败</span>
              <span [ngStyle]="{'color':'#f94d3b'}" *ngIf="data.status ==6">部分退款</span>
              <span [ngStyle]="{'color':'#f94d3b'}" *ngIf="data.status ==7">全额退款</span>
              <span [ngStyle]="{'color':'#f94d3b'}" *ngIf="data.status ==8">退款中</span>
              <span [ngStyle]="{'color':'#f94d3b'}" *ngIf="data.status ==9">退款失败</span>
            </div>
          </td>
          <td nzEllipsis *ngIf="userInfo.roleId == roleIdEnum.SUPER_ADMINISTRATOR || userInfo.roleId == roleIdEnum.AGENT">
            <div>{{ data.agencyName }}</div>
            <div class="text-sm text-grey">{{ data.agencyNo}}</div>
          </td>
          <td nzEllipsis>
            <div *ngIf="data.username">
              <div>{{data.username}}</div>
              <div class="text-sm text-grey">{{data.name}}</div>
            </div>
            <span *ngIf="!data.username"><nz-tag nzColor="success">微信授权</nz-tag></span>
          </td>
        </tr>
      </ng-container>
    </tbody>
  </nz-table>
</div>
